<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .div2 {
      width: 200px;
      height: 200px;
      background: greenyellow;
      overflow: hidden;
      margin: auto;
      display: flex;
    }
    .div3 {
      width: 100px;
      height: 100px;
      background: red;
      margin: auto;
    }
    .div1 {
      width: 500px;
      height: 500px;
      background: blueviolet;
      margin: auto;
      display: flex;
    }
  </style>
  <body>
    <!-- <div class="div3" onclick="fun3()">
      <div class="div1" onclick="fun1()">
        <div class="div2" onclick="fun2()"></div>
      </div>
    </div> -->
    <div class="div1">
      <div class="div2">
        <div class="div3"></div>
      </div>
    </div>
    <button id="btn">button</button>
  </body>
  <script>
    // function fun3() {
    //   console.log('div3')
    // }
    // function fun2() {
    //   console.log('div2')
    //   //   event.stopPropagation()
    // }
    // function fun1() {
    //   console.log('div1')
    //   //   event.stopPropagation()
    // }

    document.getElementsByClassName('div2')[0].addEventListener(
      'click',
      function () {
        console.log('div2')
      },
      true
    )
    document
      .getElementsByClassName('div1')[0]
      .addEventListener('click', fun1, true)
    // document
    //   .getElementsByClassName('div1')[0]
    //   .addEventListener('click', fun2, true)
    document.getElementsByClassName('div3')[0].addEventListener(
      'click',
      function () {
        console.log('div3')
      },
      true
    )
    function fun1() {
      console.log('div1')
    }
    function fun2() {
      console.log('div2')
    }
    document.getElementById('btn').addEventListener('click', btnfun, false)
    function btnfun() {
      console.log(document.getElementsByClassName('div1')[0])
      document
        .getElementsByClassName('div1')[0]
        .removeEventListener('click', fun1, true)
    }
  </script>
</html>
